<template>
  <div class="header-box">
    <div class="header">
      <div class="logo-box" @click="onHome">
        <div class="logo"></div>
        物联网智库
      </div>
      <div class="nav-list">
        <div
          class="nav"
          v-for="(item, index) of navList"
          :key="index"
          :class="{ active: activePath === item.path }"
          @click="changeNav(item.path)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="search-box">
        <div class="search-icon" @click.stop="onSearch">
          <div class="input-box" :class="{ show: search }">
            <i class="el-icon-close" @click.stop="onClose"></i>
            <el-input
              v-model="searchData"
              style="width: 90%;"
              placeholder="请输入关键词"
              @input="handleChange"
            ></el-input>
          </div>
        </div>
        <span class="cooperation-btn" @click="toCooperation">合作</span>
      </div>
    </div>
    <!-- 搜索列表 -->
    <div class="list-box" v-if="searchList.length">
      <div
        class="list-item"
        v-for="(sItem, sIndex) of searchList"
        :key="sIndex"
        @click="onDetail(sItem.uuid)"
      >
        {{ sItem.name }}
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { homeSearch } from "@/api/api";

export default {
  data() {
    return {
      activePath: "",
      navList: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "活动",
          path: "/activity",
        },
        {
          name: "挚物研究院",
          path: "/institute",
        },
        {
          name: "案例库",
          path: "/caseLibrary",
        },
        {
          name: "产业图谱",
          path: "/atlas",
        },
        {
          name: "企业库",
          path: "/companylibrary",
        },
        {
          name: "智吱屋",
          path: "/zjw",
        },
      ],
      search: false,
      searchData: "活动",
      searchList: [],
    };
  },
  watch: {
    $route(route) {
      this.activePath = route.path;
    },
  },
  methods: {
    // 搜索框值改变时
    handleChange: _.debounce(function(val) {
      this.searchData = val;
      this.homeSearch(val);
    }, 800),
    // 搜索
    async homeSearch(val) {
      const params = {
        searchKey: val,
      };
      const res = await homeSearch(params);
      this.searchList = res.list || [];
    },
    changeNav(path) {
      // 智吱屋打开新的标签页
      if (path !== "/zjw") {
        this.$router.push({ path: path });
      } else {
        let routerJump = this.$router.resolve({ path: path });
        window.open(routerJump.href, "_blank");
      }
    },
    onHome() {
      this.$router.push({ name: "Home" });
    },
    toCooperation() {
      this.$router.push({ name: "Cooperation" });
    },
    onSearch() {
      if (this.search) {
        this.homeSearch(this.searchData);
      } else {
        this.search = true;
        this.searchData = "";
      }
    },
    onClose() {
      this.clear();
    },
    onDetail(uuid) {
      this.$router.push({ name: "InformationDetail", query: { uuid } });
      this.clear();
    },
    clear() {
      this.searchList = [];
      this.searchData = "";
      this.search = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.header-box {
  width: 100%;
  height: 72px;
  background: #ffffff;
  box-shadow: 0px -1px 0px 0px #f1f1f1;
  font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei";
  font-family: PingFangSC-Medium, PingFang SC;
  .header {
    width: 1180px;
    height: 72px;
    margin: 0 auto;
    overflow: hidden;
    .logo-box {
      float: left;
      height: 72px;
      font-size: 24px;
      // font-family: Helvetica;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei";
      color: #272727;
      line-height: 72px;
      margin-right: 100px;
      cursor: pointer;
      .logo {
        width: 32px;
        height: 32px;
        background: url("../../assets/header_logo.png") no-repeat;
        background-size: cover;
        float: left;
        margin-top: 20px;
        margin-right: 6px;
      }
    }
    .nav-list {
      overflow: hidden;
      float: left;
      .nav {
        float: left;
        margin-right: 60px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #696969;
        line-height: 72px;
        cursor: pointer;
        &.active {
          color: #d42a31;
        }
      }
    }
    .search-box {
      float: right;
      font-size: 18px;

      font-weight: 400;
      color: #272727;
      height: 72px;
      line-height: 72px;
      .search-icon {
        width: 24px;
        height: 24px;
        background: url("../../assets/search.png") no-repeat;
        background-size: cover;
        margin-top: 24px;
        float: left;
        margin-right: 36px;
        cursor: pointer;
        position: relative;
        .input-box {
          width: 880px;
          line-height: 36px;
          position: absolute;
          top: -6px;
          right: 44px;
          transition: all 0.6s;
          transform: translateX(880px);
          z-index: -1;
          &.show {
            transition: all 0.6s;
            transform: translateX(0);
            z-index: 1;
          }
          .el-icon-close {
            margin: 0 10px;
            cursor: pointer;
          }
          /deep/.el-input__inner {
            border: none;
          }
        }
      }
      .cooperation-btn {
        cursor: pointer;
      }
    }
  }
  .list-box {
    width: 880px;
    position: absolute;
    top: 75px;
    left: 50%;
    margin-left: -405px;
    line-height: 45px;
    background: #fff;
    z-index: 99;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 15px 0;
    box-sizing: border-box;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: scroll;
    .list-item {
      width: 100%;
      padding: 0 30px;
      box-sizing: border-box;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        color: #d42a31;
        background: #f2f6fc;
        cursor: pointer;
      }
    }
  }
}
</style>
